<template>
	<div class="hot">
		<div class="hot-top">
			<span class="iconfont fire">&#xe6e7;</span>
			<label class="hot-til">本周热门榜单</label>
			<label class="hot-all">
				全部榜单
				<span class="iconfont">&#xe637;</span>
			</label>
		</div>
		<ul class="hot-list">
			<li class="hot-item" v-for="(item,index) in hotList" :key="index">
				<img :src="item.hotURL" >
				<p>{{item.hotTil}}</p>
				<p>
					<span>￥{{item.price}}</span>起
				</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props:['hotList'],
		data(){
			return{
				// hotList :[
				// 	{id :1 ,hotURL:require('@/assets/img/hot01.jpg') , hotTil:'长隆野生动物世界', price:'250'},
				// 	{id :2 ,hotURL:require('@/assets/img/hot02.jpg') , hotTil:'长隆欢乐世界', price:'210.9'},
				// 	{id :3 ,hotURL:require('@/assets/img/hot03.jpg') , hotTil:'广州塔', price:'125'},
				// 	{id :4 ,hotURL:require('@/assets/img/hot04.jpg') , hotTil:'海珠国家湿地公园', price:'19'},
				// 	{id :5 ,hotURL:require('@/assets/img/hot05.jpg') , hotTil:'长隆国际大马戏剧院', price:'297.6'},
				// 	{id :6 ,hotURL:require('@/assets/img/hot06.jpg') , hotTil:'珠江夜游', price:'68'},
				// 	{id :7 ,hotURL:require('@/assets/img/hot07.jpg') , hotTil:'天适樱花悠乐园', price:'250'},
				// 	{id :8 ,hotURL:require('@/assets/img/hot08.jpg') , hotTil:'广州长隆旅游度假区', price:'84.3'},
				// 	{id :9 ,hotURL:require('@/assets/img/hot09.jpg') , hotTil:'广州融创雪世界', price:'104'},
				//     {id :10 ,hotURL:require('@/assets/img/hot10.jpg') , hotTil:'广州正佳极地海洋世界', price:'115'},
				// ]
			}
		}
	}
</script>

<style>
	.hot{
		width: 100%;
		margin-top: 0.4rem;
		background-color: white;
		font-size: 0.28rem;
		
	}
	.hot-top{
		/* position: relative; */
		padding: 0.2rem;
		
	}
	.fire{
		color: #FF4500;
		font-size: 0.48rem;
		margin-right: 0.1rem;
	}
	.hot-til{
		color: #212121;
		font-weight: bold;
		font-size: 0.4rem;
		
	}
	.hot-all{
		display: inline-block;
		float: right;
		padding-top: 0.1rem;
		color: #616161;
	}
	.hot-list{
		margin-top: 0.2rem;
		padding-bottom: 0.4rem;
		/* overflow: hidden; */
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
	}
	.hot-item{
		width: 2rem;
		height: 2rem;
		padding: 0.2rem;
		/* 将li标签转换成行内块 */
		display: inline-block;
	}
	.hot-item img{
		width: 100%;
		height: 100%;
	}
	.hot-item p{
		text-align: center;
		margin-top: 0.1rem;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		
	}
</style>
